<template>
  <div class="personal">
    <div class="img-wrapper">
      <img v-if="user.imgUrl == null || user.imgUrl == ''" src="static/img/server/userbanner.jpg" alt />
      <img v-else :src="$platIMG + user.imgUrl" />
      <button class="wrapper-back" @click="$router.back()">
        <span slot="icon" class="iconfont">&#xe60f;</span>
      </button>
      <button class="img-edit" v-if="access">
        修改封面图片
        <input
          class="editUserBanner"
          name="file"
          type="file"
          accept="image/png, image/gif, image/jpeg"
          @change="updateImg"
        />
      </button>
    </div>

    <!-- <mt-popup v-model="gallaryVisible" popup-transition="popup-fade" class="mint-popup-3" :modal="false">
      <gallary></gallary>
      <mt-button @click.native="gallaryVisible = false" size="large" type="primary">关闭 popup</mt-button>
    </mt-popup>-->

    <div class="info-wrapper">
      <div class="wrapper-icon">
        <img v-if="user.iconUrl == null || user.iconUrl == ''" src="static/img/server/usericon.png" />
        <img v-else :src="$platIMG + user.iconUrl" />
      </div>
      <button class="btn-editII" v-if="access">
        <span slot="icon" class="iconfont">&#xe605;</span>
        <input
          class="editIconImg"
          name="file"
          type="file"
          accept="image/png, image/gif, image/jpeg"
          @change="updateImg"
        />
      </button>
      <div class="wrapper-info">
        <div class="info-text">{{user.nickName}}</div>
        <div class="info-text">当前角色：{{isGuideText}}</div>
        <div class="wrapper-detail" @click="$router.push('/personalDataEdit/'+id)">
          <span slot="icon" class="iconfont">&#xe60a;</span>
          修改个人详细信息
          <span slot="icon" class="iconfont icon-angle-right">&#xe614;</span>
        </div>
      </div>
    </div>
    <div class="personal-label">
      <my-title2 titleName="个人标签"></my-title2>
      <div class="content">
        <span>潜水</span>
        <span>女汉子</span>
        <span>烘焙达人</span>
      </div>
    </div>
    <div class="personal-label">
      <my-title2 titleName="成员评价"></my-title2>
      <div class="content">
        <span>贴心</span>
        <span>好友</span>
        <span>团宠</span>
      </div>
    </div>
    <div class="serviceProvided">
      <my-title2 titleName="提供服务"></my-title2>
      <div class="content clearfix">
        <div class="content-swapper">
          <div slot="icon" class="iconfont">&#xe69d;</div>
          <div class="text">徒步</div>
        </div>
        <div class="content-swapper">
          <div slot="icon" class="iconfont">&#xe615;</div>
          <div class="text">包车</div>
        </div>
        <div class="content-swapper">
          <div slot="icon" class="iconfont">&#xe628;</div>
          <div class="text">接送机</div>
        </div>
      </div>
    </div>
    <div class="calendar">
      <my-title2 titleName="TA的日程表"></my-title2>
      <div class="content">
        <calendar></calendar>
      </div>
    </div>
    <div class="serviceReleased">
      <my-title2 titleName="TA发布的服务"></my-title2>
      <div class="content">
        <div v-for="(item, index) in serviceReleasedList" :key="index">
          <router-link :to="'/routeServDetail/'+item.id+'/'+item.creator">
            <my-route :route="item"></my-route>
          </router-link>
        </div>
      </div>
    </div>
    <div class="routeServiced">
      <my-title2 titleName="TA服务的路线"></my-title2>
      <div class="content">
        <div v-for="(item, index) in routeServicedList" :key="index">
          <router-link :to="'/routeReqDetail/'+item.id+'/'+item.creator">
            <my-route :route="item"></my-route>
          </router-link>
        </div>
      </div>
    </div>
    <div class="demandReleased">
      <my-title2 titleName="TA发布的需求"></my-title2>
      <div class="content">
        <div v-for="(item, index) in demandReleasedList" :key="index">
          <router-link :to="'/routeReqDetail/'+item.id+'/'+item.creator">
            <my-route :route="item"></my-route>
          </router-link>
        </div>
      </div>
    </div>
    <div class="routeJoined">
      <my-title2 titleName="TA参加的路线"></my-title2>
      <div class="content">
        <div v-for="(item, index) in routeJoinedList" :key="index">
          <router-link to="/routeReqDetail">
            <!-- <my-route :route="item"></my-route> -->
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchGetData, fetchPostData } from "@/api/fetch.js";
import { getDictionaryKey } from "@/libs/util.js";
import calendar from "@/components/common/Calendar";
import {mapActions} from 'vuex';
export default {
  name: "personal",
  data() {
    return {
      id: this.$route.params.id,
      access: false,
      user: {},
      serviceReleasedList: [],
      routeServicedList: [],
      demandReleasedList: [],
      routeJoinedList: [{ id: "1" }, { id: "2" }],
      isGuideText: ""
      // gallaryVisible: false
      // slide1: [
      //   {
      //     src:
      //       "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
      //     msrc:
      //       "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
      //     alt: "picture1",
      //     title: "Image Caption 1",
      //     w: 600,
      //     h: 400
      //   },
      //   {
      //     src:
      //       "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg",
      //     msrc:
      //       "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
      //     alt: "picture2",
      //     title: "Image Caption 2",
      //     w: 1200,
      //     h: 900
      //   }
      // ]
    };
  },
  props: [],
  components: {
    calendar,
  },
  methods: {
    ...mapActions(["validLogin"]),
    handleClose() {
      console.log("close event");
    },
    updateImg(e) {
      let file = e.target.files[0];
      console.log(e.target.className);
      let param = new FormData(); //创建form对象
      param.append("file", file); //通过append向form对象添加数据
      // param.append("chunk", "0"); //添加form表单中其他数据
      console.log(param.get("file")); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { cache: false, processData: false, contentType: false }
      }; //添加请求头
      fetchPostData("/api/sysPub/upload", param, config).then(res => {
        console.log(res);
        let newPath = res.data.path;
        if (e.target.className == "editUserBanner") {
          fetchPostData("/api/user/edit", {
            id: this.id,
            imgUrl: res.data.path
          }).then(res => {
            this.user.imgUrl = newPath;
          });
        } else if (e.target.className == "editIconImg") {
          fetchPostData("/api/user/edit", {
            id: this.id,
            iconUrl: res.data.path
          }).then(res => {
            this.user.iconUrl = newPath;
          });
        }
      });
    }
    // clickEditIImg() {
    //   let file = document.getElementsByClassName("editIconImg");
    //   console.log(file);
    //   file.click();
    // }
  },
  mounted() {
    if(this.$route.params.access == 'edit' && this.validLogin()) {
      this.access = true;
    }
    fetchGetData("/api/user/detail", { id: this.id }).then(data => {
      if (data.status == 1) {
        this.user = data.data;
        this.isGuideText = getDictionaryKey("key1004", this.user.isGuide);
      } else {
        console.log("fail");
      }
    });
    fetchPostData("/api/routeService/list", { creator: this.id }).then(data => {
      if (data.status == 1) {
        this.serviceReleasedList = data.data.rows;
      } else {
        console.log("fail");
      }
    });
    fetchPostData("/api/routeRequire/list", { guide: this.id }).then(data => {
      if (data.status == 1) {
        this.routeServicedList = data.data.rows;
      } else {
        console.log("fail");
      }
    });
    fetchPostData("/api/routeRequire/list", { creator: this.id }).then(data => {
      if (data.status == 1) {
        this.demandReleasedList = data.data.rows;
      } else {
        console.log("fail");
      }
    });
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/variable.styl';

.personal {
  background-color: #F2F2F2;

  .img-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    overflow: hidden;
    background-color: #eee;
    position: relative;

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

    .wrapper-back {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      height: 0.5rem;
      width: 0.5rem;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 0.25rem;
      color: #fff;
      line-height: 0.5rem;
    }

    .img-edit {
      position: absolute;
      height: 30px;
      width: 100px;
      background-color: rgba(204, 204, 204, 0.6);
      color: $themeColor;
      left: 50%;
      transform: translateX(-50px);
      top: 50%;
      text-align: center;
      border-radius: 5px;
      line-height: 30px;
      overflow: hidden;

      .editUserBanner {
        opacity: 0;
        position: absolute;
        left: 0;
        rigth: 0;
      }
    }
  }

  // .mint-popup-3 {
  // width: 100%;
  // height: 100%;
  // background-color: #fff;
  // }

  // .mint-popup-3 .mint-button {
  // position: absolute;
  // width: 90%;
  // top: 50%;
  // left: 5%;
  // transform: translateY(-50%);
  // }
  .info-wrapper {
    margin: -0.2rem 0.3rem 0;
    background-color: #fff;
    padding: 0.3rem;
    display: flex;
    border-radius: 0.2rem;
    position: relative;
    box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.1);

    .wrapper-icon {
      height: 1.6rem;
      width: 1.6rem;
      border-radius: 0.8rem;
      float: left;
      overflow: hidden;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .btn-editII {
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      left: 0.3rem;
      bottom: 0.3rem;
      z-index: 99999;
      font-size: 0.4rem;
      color: $themeColor;
      background-color: rgba(204, 204, 204, 0.6);
      border-radius: 0.2rem;
      overflow: hidden;

      .editIconImg {
        opacity: 0;
        position: absolute;
        left: 0;
        rigth: 0;
      }
    }

    .wrapper-info {
      margin-left: 0.2rem;

      .info-text {
        height: 0.4rem;
        line-height: 0.4rem;
      }

      .wrapper-detail {
        height: 0.6rem;
        line-height: 0.6rem;
        margin-top: 0.2rem;
        padding: 0 0.2rem;
        background-color: #eee;
        border-radius: 0.1rem;
      }
    }
  }

  .personal-label {
    margin-top: 0.2rem;
    padding: 0 0.3rem;
    background-color: #fff;

    .content {
      padding: 0.2rem 0;

      span {
        background-color: #D9D9D9;
        display: inline-block;
        padding: 0.05rem 0.15rem;
        height: 0.4rem;
        line-height: 0.4rem;
        margin-right: 0.2rem;
        border-radius: 0.05rem;
      }
    }
  }

  .serviceProvided {
    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0 0.3rem;

    .content {
      padding: 0.2rem 0;

      .content-swapper {
        float: left;
        margin-right: 0.4rem;
        text-align: center;

        .iconfont {
          font-size: 0.8rem;
          color: $themeColor;
        }

        .text {
          font-size: 0.2rem;
          margin-top: 0.1rem;
        }
      }
    }
  }

  .calendar {
    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0 0.3rem 0.3rem;
  }

  .serviceReleased {
    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0 0.3rem 0.3rem;
  }

  .routeServiced {
    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0 0.3rem 0.3rem;
  }

  .demandReleased {
    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0 0.3rem 0.3rem;
  }

  .routeJoined {
    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0 0.3rem 0.3rem;
  }
}

// 清除浮动
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>